<!-- 线路概览 -->
<template>
  <CommonPanel title="线路概览">
    <template #content>
      <div class="fullScreen"><i class="iconfont icon-full-screen" @click="toggleFullScreen"></i></div>
      <img src="/src/assets/uiResources/sub.png" id="imgTools" />
    </template>
  </CommonPanel>
</template>

<script setup>
import Viewer from 'viewerjs';
import { nextTick, onMounted } from 'vue';
import CommonPanel from '../panel/CommonPanel.vue';

onMounted(() => {
  nextTick(() => {
    const viewer = new Viewer(document.getElementById('imgTools'), {
      inline: false,
      navbar: false,
      toolbar: false,
      viewed() {
        viewer.zoomTo(0.1);
      },
    });
  });
});
const toggleFullScreen = () => {
  const img = document.getElementById('imgTools');
  img.requestFullscreen();
};
</script>
<style scoped>
#image {
  width: 200px;
}
.viewer-container.viewer-backdrop {
  display: none;
}
#imgTools {
  width: 500px;
  height: 270px;
  margin: 0 auto;
  pointer-events: none;
}
.fullScreen {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 0 0 0 40px;
}
.iconfont {
  position: absolute;
  top: 50px;
  left: -3px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
</style>
